<template>
<!--  <div class="form-control w-full" :class="{'dark-mode': isDarkMode}">-->
  <div class="form-control w-full ">
    <label v-if="label" class="label">
      <span class="label-text">
        {{ label }}
        <span v-if="required" class="text-error ml-1">*</span>
      </span>
    </label>
    <div class="relative">
      <select
        :value="modelValue || ''"
        @change="handleChange"
        class="select select-bordered w-full appearance-none"
        :class="{
          'select-error': error || (required && showRequiredError),
          'select-disabled': disabled,
          'pr-16': modelValue && !disabled
        }"
        :disabled="disabled"
        @blur="handleBlur">
        <option value="" disabled selected>{{ placeholder }}</option>
        <option
          v-for="item in options"
          :key="item.value"
          :value="item.value"
        >
          {{ item.label }}
        </option>
      </select>
      <button
        v-if="modelValue && !disabled"
        type="button"
        class="absolute right-8 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 z-10 p-1"
        @click="clearSelection"
      >
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
    <label v-if="error || (required && showRequiredError)" class="label">
      <span class="label-text-alt text-error">{{ error || '请选择一个选项' }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Option {
  label: string;
  value: string | number;
}

interface Props {
  // 当前选中的值
  modelValue?: string | number;
  // 可选项数组
  options: Option[];
  // 输入框标签
  label?: string;
  // 输入框占位符
  placeholder?: string;
  // 错误信息
  error?: string;
  // 是否禁用输入框
  disabled?: boolean;
  // 是否为必填项
  required?: boolean;
  // 是否为深色模式
  darkMode?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请选择',
  disabled: false,
  options: () => [],
  required: false,
  darkMode: true
});

const isDarkMode = ref(true);

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void;
}>();

const showRequiredError = ref(false);

const select = ref(props.modelValue || '')

// 监听props.modelValue的变化
watch(() => props.modelValue, (newValue) => {
  select.value = newValue || '';
});

const handleChange = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  select.value = target.value;
  emit('update:modelValue', target.value);
  // 如果用户选择了选项，隐藏必填错误提示
  if (target.value !== '') {
    showRequiredError.value = false;
  } else if (props.required) {
    showRequiredError.value = true;
  }
};

const clearSelection = () => {
  select.value = '';
  emit('update:modelValue', '');
  // 如果是必填项，显示必填错误提示
  if (props.required) {
    showRequiredError.value = true;
  }
  if (props.required) {
    showRequiredError.value = true;
  }
};

const handleBlur = (event: Event) => {
  const target = event.target as HTMLSelectElement;
  // 当失去焦点且为必填项但未选择选项时，显示必填错误提示
  if (props.required && target.value === '') {
    showRequiredError.value = true;
  } else {
    showRequiredError.value = false;
  }
};

watch(() => props.darkMode, (newValue) => {
  isDarkMode.value = newValue;
  console.log("select isDarkMode===============", isDarkMode.value)
}, { immediate: true, deep: true });
// 暴露方法给父组件
defineExpose({
  select
});
</script>

<style scoped>
.select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.select:disabled {
  background-image: none;
}

.select-disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 深色模式适配 */
.dark-mode {
  background: transparent !important;
}
.dark-mode .select {
    background-color: var(--se-main-bg-color) !important;
    color: var(--text-color) !important;
    border-color: rgb(170,170,170) !important;
    border-width: 1px;
    box-shadow: var(--select-shadow-color) !important;
}

.dark-mode .select option {
    background-color: var(--se-main-bg-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .select:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1) !important;
}


.dark-mode .select:disabled {
  background-color: #1f2937 !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}


.label-text {
  color: var(--text-color) !important;
}
.label-text-alt {
  color: var(--error-color) !important;
}
.text-error {
  color: var(--error-color) !important;
}
@media (max-width: 1024px) {
  .select {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 28px !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2rem !important;
  }

  .select option {
    font-size: 12px !important;
  }

  .label-text {
    font-size: 12px !important;
  }

  .dark-mode .label-text {
    color: var(--text-color);
  }

  .label-text-alt {
    font-size: 11px !important;
  }

  .label {
    padding: 0.25rem 0 !important;
  }

  .h-4 {
    height: 1rem !important;
  }

  .w-4 {
    width: 1rem !important;
  }

  .right-8 {
    right: 2rem !important;
  }

  .p-1 {
    padding: 0.25rem !important;
  }
}
.text-gray-500{
    color: var(--text-color);
}
.text-gray-500:hover{
  color: var(--btn-hover-color);
}
</style>
